<template>
    <div class="h-full flex flex-col">
        <el-form :inline="true" :model="searchform" style="width:100%">
            <div class="flex w-full">
                <el-form-item label="用户名">
                    <el-input v-model="searchform.name" placeholder="请输入用户名" clearable style="width:200px;"/>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onQuery" :icon="Search">查询</el-button>
                    <el-button @click="onRest" :icon="Refresh">重置</el-button>
                </el-form-item>
            </div>
        </el-form>
        <div class="table-section flex-1">
            <div class="h-full flex flex-col gap-5 justify-between">
                <el-table border :data="tableData.list">
                    <el-table-column prop="nickname" label="用户名称" align="center"/>
                    <el-table-column prop="content" label="建议内容" align="center"/>
                    <el-table-column prop="images" label="建议图片" align="center">
                        <template #default="scope">
                            <el-image v-for="(item, index) in scope.row.images" :key="index" :src="item" :preview-src-list="scope.row.images" style="width:auto;height: 50px;" preview-teleported/>
                        </template>
                    </el-table-column>
                    <el-table-column prop="phone" label="手机号码" align="center"/>
                    <el-table-column prop="createdAt" label="创建时间" align="center"/>
                    <el-table-column prop="updatedAt" label="更新时间" align="center"/>
                    <el-table-column prop="action" label="操作" fixed="right" width="200px" align="center">
                        <template #default="scope">
                            <el-tooltip content="回复" placement="top">
                                <el-button type="primary" :icon="ChatRound" plain circle @click="openDialog('reply',scope.row)"></el-button>
                            </el-tooltip>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                    :total="tableData.total"
                    v-model:current-page="tableData.page"
                    v-model:page-size="tableData.size"
                    :page-sizes="[10, 50, 100, 200]"
                    background
                    layout="total, sizes, prev, pager, next, jumper"
                    @size-change="handleSizeChange"
                    @current-change="handlePageChange"
                />
            </div>
        </div>

        <dialog-reply ref="dialog-reply-ref" @update="getList"></dialog-reply>
    </div>

</template>
<script setup>
import { onMounted, reactive, useTemplateRef } from 'vue'
import { ChatRound, Delete, Edit, Memo, Plus, Refresh, Search } from '@element-plus/icons-vue'
import suggestApi from 'api/model/suggest.js'
import dialogReply from './dialog-reply.vue'

/**
 * 搜索相关字段
 */
const searchform = reactive({
    name: '',
})

/**
 * 表格相关字段
 */
const tableData = reactive({
    list: [],
    total: 0,
    page: 1,
    size: 10
})

/**
 * 查询
 */
function onQuery () {
    tableData.page = 1
    getList()
}

/**
 * 重置
 */
function onRest () {
    searchform.name = ''
    onQuery()
}

/**
 * 打开回复弹窗
 */
const dialogReplyRef = useTemplateRef('dialog-reply-ref')

function openDialog (type, item) {
    dialogReplyRef.value.openDialog(type, item)
}

/**
 *  获取列表
 */
async function getList () {
    const { code, data } = await suggestApi.list.get({
        page: tableData.page,
        size: tableData.size,
        name: searchform.name,
    })
    if (code === 200) {
        const { list = [], total } = data
        tableData.list = list
        tableData.total = total
    } else {
        tableData.list = []
        tableData.total = 0
    }
}

/**
 * 分页的每页数量改变
 * @param data
 */
function handleSizeChange (data) {
    tableData.size = data
    tableData.page = 1
    getList()
}

/**
 * 分页的页码改变
 * @param data
 */
function handlePageChange (data) {
    tableData.page = data
    getList()
}

onMounted(() => {
    getList()
})

</script>


<style>

.table-section {
}
</style>

